<template>
  <div class="operation">
    <div class="operation-heder-t">
      <HeadTop :title="headTitle"></HeadTop>
    </div>
    <div class="operation-top-div"></div>
    <div class="operation-con-top">
      <div class="search-left" @click="show = true">
        <img src="../../../assets/icon-time.png" class="search-icon" />
        <section v-if="startDate">
          {{startDate}}<span class="search-left-tips">至</span>{{endDate}}
        </section>
        <section v-else>
          全部
        </section>

      </div>
    </div>
    <div class="operation-con">
      <div class="operation-add" @click="getAdd()">
        <img src="../../../assets/icon-add.png" class="operation-add-icon"/>
        添加
      </div>
      <van-calendar v-model="show" type="range" @confirm="onConfirm" :min-date="minDate" :max-date="maxDate"/>

      <div class="operation-title">历史报表</div>
        <ReportMap :tabIdx="tabIdx"
                   :pageSize="pageSize"
                   :pageCount="pageCount"
                   :dataType="dataType"
                   v-on:showChange="showChange2"
                   v-on:pageChange="pageChange"
        ></ReportMap>
    </div>

  </div>
</template>

<script >
import { getReportFormListLb} from '../../../api/index.js'
import { getYYYYMMDD } from '../../../api/unit.js'
import HeadTop from '../../../components/headTop.vue'
import ReportMap from './components/reportMap.vue'
export default {
  data () {
    return {
      headTitle: '34号水草缸',
      tabIdx: -1,
      fishTankId: 'a8e986eb-2d28-40cb-bdec-699c199d1e4c',
      page: 1,
      pageSize: 5,
      pageCount: 0,
      dataType: [],
      date: '',
      show: false,
      startDate: '',
      endDate: '',
      minDate: new Date(new Date() - 365 * 24 * 60 * 60 * 1000),
      maxDate: new Date()
    }
  },
  methods: {
    getUrl () {
      this.$router.go(-1)
    },
    getAdd (index) {
      this.$router.push({path: '/facility/addReport', query: {tabIdx2: this.tabIdx2}})
    },
    async getData () {
      const data = {
        fishTankId: this.fishTankId,
        reportTypeId: this.tabIdx2,
        page: this.page,
        pageSize: this.pageSize
      }
      // data = JSON.stringify(data)
      if (this.startDate !== '') {
        data.startDate = this.startDate
        data.endDate = this.endDate
      }
      const result = await getReportFormListLb(data)
      this.pageCount = result.data.page.pageCount
      let dataType = this.dataType
      result.data.result.map(v => {
        dataType.push(v)
      })
      this.dataType = dataType
    },
    formatDate (date) {
      return `${date.getMonth() + 1}/${date.getDate()}`
    },
    onConfirm (date) {
      const [start, end] = date
      this.show = false
      this.startDate = getYYYYMMDD(date[0]).nTime
      this.endDate = getYYYYMMDD(date[1]).nTime
      this.page = 1
      this.getData()
    },
    pageChange (event) {
      this.page = ++this.page
      this.getData()
    },
    showChange2 (index) {
      if (this.tabIdx !== index) {
        this.tabIdx = index
      } else {
        this.tabIdx = -1
      }
    }
  },
  mounted () {
    this.getData()
  },
  components: {
    HeadTop,
    ReportMap
  }
}
</script>

<style scoped>
.operation{

}

.operation-heder-t{
  position: fixed;
  top: 0;
  left: 0;
  width: 750px;
  background: #fff;
}

.operation-top-div{
  height: 120px;
 width: 750px;
}
.operation-con{
  min-height: 1300px;
  background: #ebebeb;
  padding: 30px 30px 30px;
}
.search-icon{
  width: 31px;
  height: 31px;
  margin-right: 19px;
}
.search-left-tips{
  font-size: 26px;
  color: #c3c3c3;
  padding: 0 29px;
}
.search-left{
  background:#fff;
  font-size: 28px;
  line-height: 75px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #202020;
  font-weight: bold;
  /* width: 750px; */
}
.operation-add{
  background:#fff;
  font-size: 32px;
  color: #202020;
  display: flex;
  align-items: center;
  width: 692px;
  height: 75px;
  justify-content: center;
  box-shadow:0px 0px 10px 0px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
}
.operation-add-icon{
  width: 35px;
  height: 35px;
  margin-right: 9px;
}
.operation-con-top{
  border-top: 5px solid #ebebeb;
  /* display: flex; */
}
.operation-title{
  color: #a0a0a0;
  font-size: 28px;
  margin-top: 51px;
}

</style>
